<template>
  <div class="container">
    <div class="p_detail">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :lg="12">
          <h3 class="title_h3">识别要点与观赏性</h3>
          <div class="img_wraper">
            <div class="img_item" v-for="item in imgList" :key="item.id">
              <el-image
                style="width: 100%; height: 90%"
                fit="contain"
                :src="item.url"
                :preview-src-list="imgList.map(_ => _.url)"
              />
              <div>
                <span>{{ item.description }}</span>
              </div>
            </div>
            <div class="img_item" v-for="item in videoList" :key="item.id">
              <div style="width: 100%; height: 90%">
                <MuiPlayer
                  :src="imgUrl + item.name"
                  :title="item.originalFilename"
                />
              </div>
              <div>
                <span>{{ item.description }}</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div>
            <h3 class="title_h3">详情</h3>
            <el-descriptions
              style="padding-top: 5px"
              title=""
              :column="1"
              border
              size="medium"
              labelClassName="my-label"
            >
              <el-descriptions-item label="学名（拉丁名）">
                <span>{{
                  plantDetail.scientificName
                }}</span></el-descriptions-item
              >
              <el-descriptions-item label="科属">
                <span>{{ plantDetail.lauraceae }} </span></el-descriptions-item
              >
              <el-descriptions-item label="分类">
                <dict-tag
                  :options="dict.type.plant_type"
                  :value="plantDetail.plantType"
                />
              </el-descriptions-item>
              <el-descriptions-item label="配置方式">
                <dict-tag
                  :options="dict.type.plant_setting_type"
                  :value="plantDetail.plantSettingType"
                />
              </el-descriptions-item>
              <el-descriptions-item label="观赏特性">
                <dict-tag
                  :options="dict.type.plant_ornamental_character"
                  :value="plantDetail.plantOrnamentalCharacter"
                />
              </el-descriptions-item>
              <el-descriptions-item label="用途">
                <span>{{ plantDetail.purpose }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="习性">
                <span>{{ plantDetail.habit }}</span></el-descriptions-item
              >
              <el-descriptions-item label="备注">
                <span>{{ plantDetail.description }}</span></el-descriptions-item
              >
              <el-descriptions-item label="案例">
                <el-tree
                  :data="plantDetail.plantSettingTypeBaseCaseList"
                  :props="defaultProps"
                  @node-click="handleNodeClick"
                ></el-tree>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getPlantDetail } from "@/api/plant.js";

const imgType = ["png", "jpg", "jpeg"];
const videoType = [
  "m3u8",
  "mp4",
  "wmv",
  "mov",
  "mpg",
  "rmvb",
  "avi",
  "dat",
  "flv"
];

export default {
  name: "Pdetail",
  components: {},
  dicts: ["plant_type", "plant_setting_type", "plant_ornamental_character"],
  data() {
    return {
      pid: "",
      imgType,
      videoType,
      plantDetail: {},
      defaultProps: {
        children: "baseCaseList",
        label: "name"
      },
      imgList: [],
      previewList: [],
      videoList: []
    };
  },
  created() {
    // console.log(this.$route)
    this.getPlantDetail(this.$route.query.plantId);
    this.pid = this.$route.query.plantId;
  },
  activated() {},
  computed: {
    imgUrl() {
      return process.env.VUE_APP_IP || "";
    }
  },
  methods: {
    async getPlantDetail(id) {
      const res = await getPlantDetail(id);
      console.log(res);
      this.plantDetail = res.data;
      if (res.data.plantSettingTypeBaseCaseList.length > 0) {
        res.data.plantSettingTypeBaseCaseList.forEach(item => {
          item.name = item.plantSettingTypeDesc;
        });
      }
      res.data.fileList.map(item => {
        if (this.imgType.includes(item.suffix.toLowerCase())) {
          this.imgList.push(item);
          this.previewList.push(item.url);
        } else if (this.videoType.includes(item.suffix.toLowerCase())) {
          this.videoList.push(item);
        }
      });
    },
    videoLoadError(item) {
      console.log(item);
      item.status = false;
    },
    handleNodeClick(data) {
      const id = data.id;
      if (id) {
        this.$router.push({ path: "/cdetail", query: { caseid: id } });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.title_h3 {
  color: #999;
  margin-top: 0px;
  margin-left: 5px;
}
.img_wraper {
  // height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  .img_item {
    border: 1px solid #f1f2f3;
    width: 46%;
    height: 25vh;
    margin: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    cursor: pointer;
    &:hover {
      color: #837eee;
    }
    i {
      margin-right: 5px;
      color: #33ff33;
    }
  }
}
::v-deep .my-label {
  background: #f1f2f3;
  width: 160px;
}
.container {
  min-height: calc(100vh - 250px);
  background-color: #fff;
  padding-top: 33px;
}
.p_detail {
  margin: auto;
  padding: 5px;
  width: 77%;
  margin-bottom: 50px;
}
.el-row {
  height: 100%;
}
.el-col {
  height: 100%;
}
@media (max-width: 756px) {
  .p_detail {
    width: 90vw;
  }
}
</style>
